import React from 'react';
import { List, Toast } from 'antd-mobile';
import {
    SetOutline,
    RightOutline,
    AddOutline,
    MessageOutline,
    StarOutline,
    UnlockOutline
} from 'antd-mobile-icons';
import { useNavigate } from 'react-router-dom';
import '../styles/profile.scss';
import NavHeader from '../components/NavHeader';
import TabBarFooter from '../components/TabBarFooter';

// 用户信息接口
interface Patient {
    id: string;
    name: string;
    age: number;
    gender: '男' | '女';
    relation: string;
    isDefault?: boolean;
    idCard: string;
}

const ProfilePage: React.FC = () => {
    const navigate = useNavigate();

    // 模拟患者数据
    const patients: Patient[] = [
        {
            id: '1',
            name: '张三',
            age: 35,
            gender: '男',
            relation: '本人',
            isDefault: true,
            idCard: '110101199*****1234'
        },
        {
            id: '2',
            name: '张大山',
            age: 65,
            gender: '男',
            relation: '父亲',
            idCard: '110101195*****5678'
        }
    ];

    // 处理设置按钮点击
    const handleSettings = () => {
        Toast.show('设置功能开发中...');
        return;
    };

    // 处理患者点击
    const handlePatientClick = (patientId: string) => {
        Toast.show('编辑就诊人信息功能开发中...');
        return;
    };

    // 处理添加就诊人
    const handleAddPatient = () => {
        navigate('/add-patient');
    };

    // 处理更多服务项目点击
    const handleServiceClick = (service: string) => {
        Toast.show(`${service}功能开发中...`);
        return;
    };

    return (
        <div className="profile-page">
            {/* 使用公共顶部导航栏组件 */}
            <NavHeader
                title="个人中心"
                showBack={false}
                right={<SetOutline fontSize={20} onClick={handleSettings} />}
            />

            {/* 用户列表 */}
            <div className="patients-section">
                {patients.map(patient => (
                    <div
                        key={patient.id}
                        className="patient-item"
                        onClick={() => handlePatientClick(patient.id)}
                    >
                        <div className="patient-info">
                            <div className="name-row">
                                <span className="name">{patient.name}</span>
                                <span className="relation">（{patient.relation}）</span>
                                {patient.isDefault && <span className="default-tag">默认</span>}
                            </div>
                            <div className="details-row">
                                {patient.age}岁 | {patient.gender} | 身份证号：{patient.idCard}
                            </div>
                        </div>
                        <RightOutline className="arrow-icon" />
                    </div>
                ))}

                <div className="add-patient-btn" onClick={handleAddPatient}>
                    <AddOutline className="add-icon" />
                    <span>添加就诊人</span>
                </div>
            </div>

            {/* 更多服务 */}
            <div className="services-section">
                <div className="section-title">更多服务</div>
                <List className="service-list">
                    <List.Item
                        prefix={<MessageOutline color="#1677ff" />}
                        extra={<RightOutline />}
                        onClick={() => handleServiceClick('客服中心')}
                    >
                        客服中心
                    </List.Item>
                    <List.Item
                        prefix={<StarOutline color="#ff9500" />}
                        extra={<RightOutline />}
                        onClick={() => handleServiceClick('意见反馈')}
                    >
                        意见反馈
                    </List.Item>
                    <List.Item
                        prefix={<UnlockOutline color="#52c41a" />}
                        extra={<RightOutline />}
                        onClick={() => handleServiceClick('隐私政策')}
                    >
                        隐私政策
                    </List.Item>
                </List>
            </div>

            {/* 使用公共底部标签栏组件 */}
            <TabBarFooter activeKey="profile" />
        </div>
    );
};

export default ProfilePage; 